@media (min-width: 768px) {
  /* wrapper voor absolute positioning */
  .imgenthumbs {
    position: relative;
  }

  /* thumbnails overlay (JS bepaalt uiteindelijk de 'top' tijdens scroll) */
  .imgenthumbs .mt-2 {
    position: absolute;
    top: 16px;     /* startpositie vóórdat JS het overneemt */
    right: 16px;
    z-index: 10;

    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 8px;

    background: rgba(255,255,255,0.3);
    backdrop-filter: blur(4px);
    border-radius: 0; /* optioneel */
  }

  /* links als blok, bootstrap margins uitschakelen */
  .imgenthumbs .mt-2 .artikelThumbLink,
  .imgenthumbs .mt-2 .playknoplink {
    display: block !important;
    margin: 0 !important; /* overschrijft mr-1 mb-1 */
    width: 75px;
    height: 75px;
  }
  /* thumbs netjes vullen */
  .imgenthumbs .mt-2 img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  .imgenthumbs .mt-2 a.playknoplink{
    position: relative;
    overflow: hidden;      /* houdt overlay binnen 75x75 */
  }
  /* reset oude hack (margin-left:-75px) */
  .imgenthumbs .mt-2 a.playknoplink .playknop{
    position: absolute;
    inset: 0;              /* top/right/bottom/left: 0 */
    margin: 0 !important;  /* kill margin-left:-75px */
    width: 100%;
    height: 100%;
    z-index: 2;
    background: transparent url('/Portals/_default/Skins/bca2026/assets/img/iconen/play_button.png')
      top right no-repeat;
    background-size: cover; /* of 'auto' als je exact sprite-gedrag wilt */
    pointer-events: none;     /* klik blijft op de <a> */
  }
  .imgenthumbs .mt-2 a.playknoplink:hover .playknop{
    background-position: bottom right;
  }
}